<template>
  <div class="my-container w-full h-full px-6">
    <div class="header w-full">
      <a-form-model class="w-full flex flex-col" :model="form" ref="form" v-bind="layout" >
        <div class="dis-flex line-h-sele">
          <div class="dis-flex">
            <div class="dis-flex ali-c">用户姓名:</div>
            <div class="dis-flex ali-c flex-1">
              <a-input v-model="form.name" placeholder="用户姓名"></a-input>
            </div>
          </div>
          <div class="dis-flex">
            <div class="dis-flex ali-c">账号:&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div class="dis-flex ali-c flex-1">
              <a-input v-model="form.username" placeholder="账号"></a-input>
            </div>
          </div>
          <div class="dis-flex">
            <div class="dis-flex ali-c">电话:&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div class="dis-flex ali-c flex-1">
              <a-input v-model="form.tel" placeholder="电话"></a-input>
            </div>
          </div>
          <div class="flex justify-end items-center text-right">
            <a-button class="button-item mr-4" @click="reset">清空</a-button>
            <a-button class="button-item mr-4" type="primary" @click="search(1, 10)">搜索</a-button>
             <a-button class="button-item" type="primary" @click="downloadExcel">导出</a-button>
          </div>
        </div>
      </a-form-model>
    </div>
    <a-divider dashed />
    <div class="content">
      <div class="btn-group">
        <a-button  type="dashed" @click="add">
          <a-icon type="plus" />
          添加
        </a-button>
        <a-popconfirm
          title="确定要删除选中记录么?"
          ok-text="删除"
          cancel-text="取消"
          @confirm="deleteList"
          @cancel="cancel"
        >
          <a-button class="button-item">
            <a-icon type="delete" />
            删除
          </a-button>
        </a-popconfirm>
      </div>
      <a-table :columns="columns" 
        :data-source="data" 
        rowKey="id" 
        :pagination="false"
        :row-selection="{ onChange: onSelectChange }">
        <span slot="avatar" slot-scope="text, record">
          <img :src="record.avatar" />
        </span>
        <template slot="operation" slot-scope="text, record">
          <div class="flex">
            <a-button @click="editRole(record)" type="link"  style="color: rgba(0, 0, 0, 0.65); padding-left: 0;">
              配置职位
            </a-button>
            <a-divider type="vertical" />
            <a-button @click="edit(record)" type="link" style="color: rgba(0, 0, 0, 0.65);">
              编辑
            </a-button>
            <a-divider type="vertical" />
            <!-- <a-button @click="remove(record.id)" type="link" style="color: rgba(0, 0, 0, 0.65);">
              删除
            </a-button> -->
             <a-divider type="vertical" />
            <a-popconfirm
              title="确定要删除选中记录么?"
              ok-text="删除"
              cancel-text="取消"
              @confirm="remove(record.id)"
              @cancel="cancel"
            >
              <a-button type="link" style="color: rgba(0, 0, 0, 0.65)">
                删除
              </a-button>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
      <a-row>
        <a-col :span="24" class=" text-right mt-8">
          <a-pagination
            show-quick-jumper
            show-size-changer
            :show-total="pagination.showTotal"
            size="small"
            v-model="pagination.current"
            :default-current="pagination.current"
            :total="pagination.total"
            show-less-items
            @change="search"
            @showSizeChange="onShowSizeChange"
          />
        </a-col>
      </a-row>
    </div>
    <a-modal
      title="用户信息"
      v-if="visible"
      :visible="visible"
      width="640px"
      height="672px"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :destroyOnClose="true"
    >
      <Form ref="record" :tempForm="record" @pass="pass" @reject="reject" />
    </a-modal>
    <a-modal
      title="职位信息"
      v-if="visibleRole"
      :visible="visibleRole"
      width="640px"
      height="672px"
      :confirm-loading="confirmLoading"
      @ok="handleRoleOk"
      @cancel="handleRoleCancel"
      :destroyOnClose="true"
    >
      <UserRole ref="record" :tempForm="record" @pass="pass" @reject="reject" />
    </a-modal>
  </div>
</template>

<script>
import Form from "./Form"
import UserRole from "./UserRole"
export default {
  name: "List",
  components: {Form, UserRole},
  data() {
    return {
      user: {},
      form: {},
      record: {},
      data: [],
      selectedRowKeys: [],
      pagination: {
        defaultPageSize: 10,
        showTotal: (total) => `总 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        current: 1,
        size: 10,
        total: 0,
      },
      visible: false,
      visibleRole: false,
      confirmLoading: false,
      columns: [
        // {
        //   title: "头像",
        //   dataIndex: "avatar",
        //   scopedSlots: { customRender: "avatar" },
        // },
        {
          title: "姓名",
          dataIndex: "name",
        },
        {
          title: "账号",
          dataIndex: "username",
        },
        // {
        //   title: "密码",
        //   dataIndex: "password",
        // },
        {
          title: "电话",
          dataIndex: "tel",
        },
        {
          title: "邮箱",
          dataIndex: "email",
        },
        
        {
          title: "操作",
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
    };
  },
  mounted() {
    this.user = JSON.parse(sessionStorage.getItem("userInfo"));
    this.search()
  },
  methods: {
     // 导出
    downloadExcel () {
      this.$ajax({
        url: this.$api.system.user.findUserPage,
        data: Object.assign(
          {
            current: 1,
            size: 9999,
          },
          this.form,
        ),
        success: (result) => {
          this.downloadAllData(result.records)
        },
      });
    },
    downloadAllData(realData){
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "姓名",
          "账号",
          // "密码",
          "电话",
           "邮箱",
        ];
        const data = this.formatJson(
          [
            "name",
            "username",
            // "password",
            "tel",
            "email",
          ],
          realData
        );
        data.push(['总计', realData.length + '条'])
        excel.export_json_to_excel({
          header: tHeader, // Header Required
          data, // Specific data Required
          filename: "用户管理", // Optional
          autoWidth: true, // Optional
          bookType: "xlsx" // Optional
        });
      });
    },
    formatJson (filterVal, jsonData) {
      var index = 0
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "status") {
            if (v[j] == 0) {
              return '新提交';
            } else if (v[j] == 1)  {
              return '通过';
            }else if (v[j] == 2)  {
              return '驳回';
            }
          }else  if (j === "sex") {
            if (v[j] == 1)  {
              return '男';
            }else if (v[j] == 2)  {
              return '女';
            }
          } else {
            return v[j];
          }
        })
      );
    },
    reject() {
      this.confirmLoading = false;
    },
    pass() {
      this.visible = false;
      this.visibleRole = false;
      this.confirmLoading = false;
      this.search()
    },
    handleOk(e) {
      this.confirmLoading = true;
      this.$refs.record.save();
    },
    handleCancel(e) {
      this.visible = false;
    },
    handleRoleOk(e) {
      this.confirmLoading = true;
      this.$refs.record.save();
    },
    handleRoleCancel(e) {
      this.visibleRole = false;
    },
    onSelectChange(keys, rows) {
      this.selectedRowKeys = keys
    },
    remove(row) {
      this.$ajax({
        url: this.$api.system.user.deleteUser,
        data:{ids:[row]} ,
        success: (result) => {
          this.$message.success("操作成功");
          this.selectedRowKeys = []
          this.search()
        },
      });
    },
    deleteList(row) {
      if (this.selectedRowKeys && this.selectedRowKeys.length) {
        this.$ajax({
          url: this.$api.system.user.deleteUser,
          data: {ids:this.selectedRowKeys},
          success: (result) => {
            this.$message.success("操作成功");
            this.selectedRowKeys = [];
            this.pagination.current = 1;
            this.reset()
          },
        });
      } else {
        this.$message.warning("请至少选择一条记录");
      }
    },
    add() {
      this.record = {}
      this.visible = true;
    },
    edit(row) {
      this.record = row
      this.visible = true;
      // this.$router.push({path: `/member/form`, query: row});
    },
    editRole(row) {
      this.record = row
      this.visibleRole = true;
      // this.$router.push({path: `/member/form`, query: row});
    },
    onChange(page, size) {
      this.pagination.current = page;
      this.search();
    },
    onShowSizeChange(current, size) {
      this.pagination.size = size;
      this.search();
    },
    search(current, size) {
      this.$ajax({
        url: this.$api.system.user.findUserPage,
        data: Object.assign(
          {
            current: current || this.pagination.current,
            size: size || this.pagination.size,
          },
          this.form,
        ),
        success: (result) => {
          this.data = result.records;
          const pager = { ...this.pagination };
          pager.total = result.total;
          pager.current = result.current;
          pager.size = result.size;
          this.pagination = pager;
        },
      });
    },
    cancel() {
      this.$message.warning('您已取消操作');
    },
    reset() {
      // this.$refs.form.resetFields();
      this.form = this.$options.data().form;
      this.pagination.current = 1;
      this.pagination.size = 10;
      this.search()
    },
  }
};
</script>
<style lang="less" scoped>
.my-container{
  .header{
    .ant-form{
      .ant-form-item{
        input{
          width: 420px;
          height: 40px;
        }
        /deep/ .ant-form-item-label {
          width: 23% !important;
        }
      }
      .button-item{
        height: 40px;
      }
    }
  }
  .ant-divider{
    margin: 8px 0;
  }
  .content{
    display: flex;
    flex-direction: column;
    .ant-btn{
      display: flex;
      align-items: center;
    }
    .ant-table-wrapper{
      margin-top: 16px;
      // /deep/ .ant-table-thead > tr > th {
      //   font-weight: bold !important;
      // }
      /deep/ .ant-table-content{
        .ant-table-body{
          .ant-table-thead{
            tr{
              th{
                font-weight: bold !important;
              }
            }
          }
        }
      }
    }
    /deep/ .ant-pagination-item-link{
      display: flex;
      align-items: center;
    }
  }
    .dis-flex {
    display: flex;
    justify-content: space-between;
  }
  .ali-c {
    align-items: center;
  }
  .flex-1 {
    flex: 1;
    margin-left: 8px;
  }
  .line-h-sele {
    height: 60px;
  }
}
</style>